Template-based UI

  • UI structure is expressed in a template language, e.g. <div>{{ thing }}</div> .

Svelte

  • Component-based Framework.

  • No Virtual DOM.

  • Works as a compiler, to turn the .svelte  code into plain JS.

  • Full TypeScript support ( .svelte  files with <script lang="ts"> )

  • Compile-time type checking on props, stores, and events

  • Very fast runtime, small bundle

  • AJAX:

    • Fetch or load  functions use AJAX under the hood.

Syntax and workflow

  • Every .svelte  file has 3 parts:

    • script + markup + style.

  • 1 component per file.

  • Its {...}  syntax is still quite pleasant if you don't mind markup being the primary representation.

  • Svelte is much closer to HTML

  • Template-ish constructs: {#if} , {#each} , snippets.

Examples

  • Button increases a counter : 

<script>
  let count = 0;
  const increment = () => count++;
</script>

<p>Count: {count}</p>
<button on:click={increment}>Increment</button>

  • Ex2 : 

<script>
  export let items = [];
</script>

{#if items.length}
  <ul>
    {#each items as item}
      <li>{item.title}</li>
    {/each}
  </ul>
{:else}
  <div>No items</div>
{/if}

Vue

  • React's components, Angular's templates.

  • A .vue  file is:

    • Template + Script + Style

Characteristics

  • Has Virtual DOM.

  • AJAX:

    • Vue itself doesn’t do AJAX, but most Vue apps use it for components.

Syntax and workflow

  • HTML template by default

Examples

  • Button increases a counter : 

<div id="app">
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

const App = {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

createApp(App).mount('#app');
</script>

  • Ex2 : 

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
    <div v-else>No items</div>
  </div>
</template>

<script setup>
defineProps({ items: Array });
</script>

Angular (TS only)

  • Google, 2010.

  • Angular 2 in 2016.

  • Requires TS.

Characteristics

  • Has Virtual DOM.

  • Reactivity model: Change detection.

  • AJAX:

    • Has built-in HttpClient  for AJAX requests; components update via async data.

  • Template syntax, but bound tightly to TypeScript logic. 

// user-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'user-list',
  template: `
    <ul>
      <li *ngFor="let u of users">{{ u.name }}</li>
    </ul>
  `
})
export class UserListComponent {
  users = [{ id:1, name:'Alice' }, { id:2, name:'Bob' }];
}
Examples

  • Button increases a counter : 

// counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  count = 0;
  increment() { this.count++; }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CounterComponent } from './counter.component';

@NgModule({
  declarations: [CounterComponent],
  imports: [BrowserModule],
  bootstrap: [CounterComponent]
})
export class AppModule {}

Ember

  • Convention over configuration.

  • Component-based Framework